require(['../config'], () => {
    require(['template', 'header', 'footer'], (template, header) => {
        class shopTab {
            constructor() {
                this.render()

            }
            render() {
                const cart = localStorage.getItem('cart')
                console.log(JSON.parse(cart))
                if (cart) {
                    // 购物车已经存在商品
                    this.cart = JSON.parse(cart)
                    $('#cartTbody').html(
                        template('cartTemplate', { cart: this.cart })
                    )
                    this.cartOperate()
                } else {
                    // 购物车为空
                    $('#shopping_car').hide()
                    $('#cart-empty').show()
                }
                if (!this.cart.length) {
                    // 购物车为空
                    $('#shopping_car').hide()
                    $('#cart-empty').show()
                    $('#priceNum').html("￥0")
                    $('#cartNum').html("0件")

                }
            }
            cartOperate() {
                // cart有数据的时候的一些操作
                this.setAllCheckStatus() // 设置全选
                this.calcTotalMoney() // 计算总价
                this.checksChange() // 监听单选change事件
                this.allCheckChange() //全选事件
                this.numAdd() //++
                this.numMinus() //--
                this.removeData() //删除数据，单个删除
                this.removeAll() //删除所有数据
            }
            setAllCheckStatus() {
                // 根据this.cart是否全部选中来决定
                const isAllCheck = this.cart.every(shop => shop.check)
                $('#all-check').prop('checked', isAllCheck)
            }
            calcTotalMoney() {
                // 计算购物车总价
                var sum = 0
                const money = this.cart.reduce((total, shop) => {
                    if (shop.check) {
                        total += shop.price * shop.count
                        sum += shop.count
                    }
                    return total
                }, 0)
                $('#txtNum').html(sum)
                $('#priceSumSpan').html(money.toFixed(2))
            }
            checksChange() {
                const _this = this
                $('.checks').on('change', function() {
                    const isCheck = $(this).prop('checked')
                    const id = $(this).parents('tr').data('id')
                        // 根据id修改this.cart
                    _this.cart = _this.cart.map(shop => {
                            if (shop.id === id) shop.check = isCheck
                            return shop
                        })
                        // 存localStorage
                    localStorage.setItem('cart', JSON.stringify(_this.cart))
                        // 修改DOM
                    _this.setAllCheckStatus() // 设置全选
                    _this.calcTotalMoney() // 计算总价
                })
            }
            allCheckChange() {
                // 全选框绑change事件
                // this.cart每条数据的check属性跟随全选状态
                // 重新存localstorage
                // 修改单选状态，计算总价
                $('#all-check').on('change', () => {
                    const isCheck = $('#all-check').prop('checked')
                        // console.log(isCheck)
                    this.cart = this.cart.map(shop => {
                        shop.check = isCheck
                        return shop
                    })
                    localStorage.setItem('cart', JSON.stringify(this.cart))
                    $('.checks').prop('checked', isCheck)
                    this.calcTotalMoney() // 计算总价
                })
            }
            numAdd() {
                // 件数增加
                const _this = this
                $('.toggleAdd').on('click', function() {
                    $(this).prev().html($(this).prev().html() - 0 + 1)
                    const num = $(this).prev().html() - 0 + 1 - 1
                    var price = 0
                    const { id } = $(this).parents('tr').data()
                    _this.cart = _this.cart.map(shop => {
                        if (shop.id === id) {
                            shop.count = num
                            price = shop.price
                        }
                        return shop
                    })
                    localStorage.setItem('cart', JSON.stringify(_this.cart))
                    const str = "￥" + ((price * num).toFixed(2)) + "元"
                    $('.rowSum').html(str)
                    _this.calcTotalMoney()
                    header.countNum()
                })
            }
            numMinus() {
                // 件数减少
                const _this = this
                $('.toggleMinus').on('click', function() {
                    $(this).next().html($(this).next().html() - 0 - 1)
                    let num = $(this).next().html() - 1 + 1
                    var price = 0
                    if (num <= 0) {
                        num = 0
                        $(this).next().html(num)
                    }
                    const { id } = $(this).parents('tr').data()
                    _this.cart = _this.cart.map(shop => {
                        if (shop.id === id) {
                            shop.count = num
                            price = shop.price
                        }
                        return shop
                    })
                    localStorage.setItem('cart', JSON.stringify(_this.cart))
                    const str = "￥" + ((price * num).toFixed(2)) + "元"
                    $('.rowSum').html(str)
                    _this.calcTotalMoney()
                    header.countNum()
                })
            }
            removeData() {
                const _this = this
                $('.rowDel').on('click', function() {
                    const id = $(this).parents('tr').data('id')
                    console.log(id)
                    const bool = _this.cart.some((shop, index) => {
                        if (shop.id === id) {
                            _this.cart.splice(index, 1)
                            return true
                        } else {
                            return false
                        }
                    })
                    if (bool) {
                        localStorage.setItem('cart', JSON.stringify(_this.cart))
                            // console.log(_this.cart.length)
                        if (!_this.cart.length) {
                            // 购物车为空
                            $('#shopping_car').hide()
                            $('#cart-empty').show()
                            $('#priceNum').html("￥0")
                            $('#cartNum').html("0件")

                        }
                        _this.render()
                    }

                    // if (!_this.cart) {
                    //     // 购物车为空
                    //     $('#shopping_car').hide()
                    //     $('#cart-empty').show()

                    // }

                    header.countNum()
                })

            }
            removeAll() {
                $('.delAll').on('click', () => {
                    localStorage.clear()
                    this.render()
                    $('#priceNum').html("￥0")
                    $('#cartNum').html("0件")
                })
            }
        }
        new shopTab()
    })
})